<template>

	<view class='group'>
		<view class='group-header'@click="callBack()" >
			<image src="@/static/images/my/left.png" mode="" style="width: 60rpx; height: 30rpx;" >
				返回
			</image>
		</view>

		<view class='group-header'>反馈</view>
		<view class='group-body'>
			<textarea placeholder='请输入反馈的内容' name="neirong"></textarea>
		</view>

		<view class='group-header'>如何联系您？</view>
		<view class='group-body'>

			<view class='input-item'>
				<text class='input-item-label'>联系人</text>
				<view class='input-item-content'>
					<input type='text' name="lianxiren" placeholder='请输入姓名'></input>
				</view>
			</view>

			<view class='input-item'>
				<text class='input-item-label'>手机号码</text>
				<view class='input-item-content'>
					<input type='text' name="shouji" placeholder='请输入手机号码'></input>
				</view>
			</view>

			<view class='input-item'>
				<text class='input-item-label'>联系邮箱</text>
				<view class='input-item-content'>
					<input type='text' name="youxiang" placeholder='请输入邮箱'></input>
				</view>
			</view>

		</view>

		<view class='btn-submit'>
			<button class='btn' form-type="submit" @click="submit()">确认提交</button>
		</view>

		<view class='tiwen'>
			<text>如问题无法简单描述清楚</text>
			<text>可以发送问题至邮箱</text>
			<view data-tel='cvntv@163.com'>cvntv@163.com</view>
		</view>

	</view>

</template>


<script>
	// import layout from '@/components/layout/index.vue'
	import vote from '@/util/vote.js'
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 提交
			submit() {
				setTimeout(() => {
					vote.message("反馈成功！", 'success', 870)
				}, 300)
			},
			// 返回
			callBack() {
				console.log("跳转页面");
				vote.toPages("/pages/user/userInfo")
			}
		}
	}
</script>

<style>
	.group {
		display: flex;
		/*Flex布局*/
		flex-direction: column;
		/*更改Flex默认布局row为column*/
		box-sizing: border-box;
		/*宽度包含padding*/
	}

	.group-header {
		line-height: 30px;
		/*行高*/
		background-color: #f9f9f9;
		/*背景颜色*/
		padding: 0 5px;
		/*内边距 0px 5px 0px 5px*/
		border-bottom: 1px solid gainsboro;
		/*下划线*/
	}

	.group-body {
		border-bottom: 1px solid gainsboro;
		/*下划线*/
		padding: 0 5px;
		/*内边距 0px 5px 0px 5px*/
	}

	.input-item {
		padding: 5px;
		/*内边距*/
		display: flex;
		/*Flex布局*/
		border-bottom: 1px dotted gainsboro;
		/*下划线*/
	}

	.input-item-label {
		display: block;
		/*块级元素*/
		width: 5em;
		/*宽度*/
		color: gray;
		/*字体颜色*/
	}

	.input-item-content {
		color: gray;
		/*字体颜色*/
		flex: 1;
		/*占据剩余空间*/
	}

	.btn-submit {
		padding: 5px;
		/*内边距*/
	}

	.btn {
		border-radius: 5px;
		/*圆角*/
		background: orange;
		/*背景颜色*/
		color: white;
		/*字体颜色*/
	}

	.tiwen {
		display: flex;
		/*Flex布局*/
		flex-direction: column;
		/*更改Flex默认布局row为column*/
		text-align: center;
		/*居中*/
	}

	.tiwen text {
		color: grey;
		/*字体颜色*/
		font-size: 12px;
		/*字体大小*/
	}

	.tiwen view {
		color: orange;
		/*字体颜色*/
		font-size: 18px;
		/*字体大小*/
	}
</style>